@import "../../../../styles/_commonColor.scss";

.progress {
  display: block;
  height: 2rem;
  background: #fff;
  padding-top: .3rem;
  .am_flexbox{
    text-align: left;
    display: -webkit-box;
    display: -webkit-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    &:first-child {
      margin-bottom: .2rem;
    }
    .am_flexbox_item{
      margin: 0;
      padding-bottom: .47rem;
      position: relative;
      font-size: .26rem;
      text-align: center;
      color: #ababab;
      height: .25rem;
      -webkit-box-sizing: border-box;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      min-width: .2rem;
      .cx_time_icon{
        position: absolute;
        z-index: 2;
        top: .24rem;
        left: 50%;
        margin-left: -.06rem;
        display: block;
        width: .14rem;
        height: .14rem;
        background: #ababab;
        border: .02rem solid #fff;
        border-radius: 50%;
      }
      .cx_time_border{
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: .02rem;
        background: #ababab;
        top: .32rem;
      }

      .icon_success{  //成功
        background: url(../../../../images/icon_success.png) no-repeat center center scroll;
        background-size: .4rem .4rem;
        background-color: #fff;
        position: absolute;
        left: 50%;
        margin-left: -.17rem;
        margin-top: -.16rem;
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        border: .02rem solid #fff;
        /* background: #fff; */
        z-index: 2;
        display: inline-block;
      }

      .icon_moren{
        background: url(../../../../images/icon_moren.png) no-repeat center center scroll;
        background-size: .45rem .45rem;
        background-color: #fff;
        position: absolute;
        left: 50%;
        margin-left: -.17rem;
        margin-top: -.111rem;
        width: .4rem;
        height: .4rem;
        border-radius: 50%;
        border: .02rem solid #fff;
        /*background: #fff;*/
        z-index: 2;
        display: inline-block;
      }

    }
    .am_text_color{
      font-size: .3rem;
      color: $gray;
      &:first-child{
        color: $slidergreen;
      }
    }
  }


  .progress .am_flexbox_item:first-child .cx_time_border {
    left: 50%;
  }
  .progress .am_flexbox_item:last-child .cx_time_border {
    right: 50%;
  }
}